<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div id="app"></div>

    <script src="/js/react.development.js"></script>
    <script src="/js/react-dom.development.js"></script>
    <script src="/js/babel.min.js"></script>
    <script type="text/babel">
      // 自定义组件语法1: 函数式组件
      function XzRating(props) {
        console.log(props); //{count:10,color:'red'}
        let stars = ""; //☆列表
        for (let i = 0; i < props.count; i++) {
          stars += "☆";
        }
        let styleObj = { color: props.color }; // 样式对象 -- JS/JSX中,样式都是对象
        return <div style={styleObj}>{stars}</div>;
      }
      // 创建组件
      let el = <XzRating count={5} color="red"></XzRating>;
      // 查找父容器
      let root = ReactDOM.createRoot(app);
      // 挂载子组件
      root.render(el);
    </script>
  </body>
</html>
